<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人钱包 - 护工助手</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/icons.css">
    <style>
        .page-header {
            background-color: #2B7DE1;
            color: white;
            padding: 12px 16px;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 100;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .back-button {
            position: absolute;
            left: 16px;
            font-size: 20px;
            color: white;
        }
        
        .page-title {
            font-size: 17px;
            font-weight: 500;
        }
        
        .page-content {
            padding-top: 60px;
            padding-bottom: 80px;
        }
        
        .status-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 16px;
            background-color: #2B7DE1;
        }
        
        .time {
            font-size: 14px;
            color: white;
        }
        
        .status-icons {
            display: flex;
            gap: 5px;
            color: white;
        }
        
        .icon {
            font-size: 14px;
        }

        .wallet-header {
            background: linear-gradient(135deg, #2B7DE1, #5497E7);
            color: white;
            padding: 20px 16px;
            text-align: center;
        }
        
        .wallet-title {
            font-size: 15px;
            margin-bottom: 10px;
            opacity: 0.9;
        }
        
        .wallet-balance {
            font-size: 32px;
            font-weight: 600;
            margin-bottom: 20px;
        }
        
        .balance-details {
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
        }
        
        .balance-item {
            flex: 1;
            text-align: center;
        }
        
        .balance-value {
            font-size: 18px;
            font-weight: 500;
            margin-bottom: 6px;
        }
        
        .balance-label {
            font-size: 13px;
            opacity: 0.8;
        }
        
        .action-buttons {
            display: flex;
            margin: 16px;
            gap: 12px;
        }
        
        .action-button {
            flex: 1;
            background-color: white;
            border-radius: 10px;
            padding: 16px 0;
            text-align: center;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        }
        
        .action-icon {
            font-size: 24px;
            margin-bottom: 8px;
            color: #2B7DE1;
        }
        
        .action-text {
            font-size: 14px;
            color: #333;
        }
        
        .section-title {
            margin: 20px 16px 12px;
            font-size: 16px;
            font-weight: 500;
            color: #333;
        }
        
        .card-container {
            padding: 0 16px;
            margin-bottom: 16px;
        }
        
        .bank-card {
            background: linear-gradient(135deg, #333, #666);
            color: white;
            border-radius: 12px;
            padding: 16px;
            height: 180px;
            position: relative;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        }
        
        .card-logo {
            position: absolute;
            top: 16px;
            right: 16px;
            font-size: 24px;
        }
        
        .card-chip {
            width: 40px;
            height: 30px;
            background-color: rgba(255, 215, 0, 0.8);
            border-radius: 5px;
            margin-bottom: 20px;
        }
        
        .card-number {
            font-size: 18px;
            letter-spacing: 2px;
            margin-bottom: 20px;
        }
        
        .card-info {
            display: flex;
            justify-content: space-between;
            font-size: 14px;
        }
        
        .card-name {
            font-size: 14px;
        }
        
        .transaction-card {
            background-color: white;
            border-radius: 12px;
            margin: 0 16px 16px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }
        
        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px;
            border-bottom: 1px solid #f0f0f0;
        }
        
        .header-title {
            font-size: 16px;
            font-weight: 500;
        }
        
        .header-action {
            font-size: 14px;
            color: #2B7DE1;
        }
        
        .transaction-list {
            max-height: 300px;
            overflow-y: auto;
        }
        
        .transaction-item {
            display: flex;
            padding: 16px;
            border-bottom: 1px solid #f0f0f0;
        }
        
        .transaction-item:last-child {
            border-bottom: none;
        }
        
        .transaction-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #f0f0f0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            margin-right: 12px;
        }
        
        .income-icon {
            background-color: #E8F5E9;
            color: #34C759;
        }
        
        .withdraw-icon {
            background-color: #FFF3E0;
            color: #FF9500;
        }
        
        .transaction-info {
            flex: 1;
        }
        
        .transaction-title {
            font-size: 15px;
            margin-bottom: 4px;
        }
        
        .transaction-time {
            font-size: 12px;
            color: #999;
        }
        
        .transaction-amount {
            font-size: 16px;
            font-weight: 500;
        }
        
        .income-amount {
            color: #34C759;
        }
        
        .withdraw-amount {
            color: #FF9500;
        }
        
        .empty-tip {
            text-align: center;
            padding: 40px 0;
            color: #999;
            font-size: 14px;
        }
        
        .modal {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            display: none;
        }
        
        .modal-content {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: white;
            border-top-left-radius: 16px;
            border-top-right-radius: 16px;
            padding: 20px;
            max-height: 80vh;
            overflow-y: auto;
        }
        
        .modal-title {
            font-size: 18px;
            font-weight: 500;
            margin-bottom: 16px;
            text-align: center;
        }
        
        .close-button {
            position: absolute;
            right: 20px;
            top: 20px;
            font-size: 20px;
            color: #999;
        }
        
        .form-group {
            margin-bottom: 16px;
        }
        
        .form-label {
            display: block;
            font-size: 15px;
            margin-bottom: 8px;
            color: #333;
        }
        
        .form-input {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 15px;
            box-sizing: border-box;
        }
        
        .form-input:focus {
            border-color: #2B7DE1;
            outline: none;
        }
        
        .withdraw-amount-container {
            background-color: #f9f9f9;
            border-radius: 6px;
            padding: 12px;
            margin-bottom: 16px;
        }
        
        .withdraw-amount-label {
            font-size: 14px;
            color: #666;
            margin-bottom: 8px;
        }
        
        .withdraw-amount-input {
            display: flex;
            align-items: center;
            border: none;
            background: transparent;
            font-size: 24px;
            font-weight: 500;
        }
        
        .currency-symbol {
            font-size: 24px;
            margin-right: 8px;
        }
        
        .withdraw-amount-field {
            flex: 1;
            border: none;
            background: transparent;
            font-size: 24px;
            font-weight: 500;
            width: 100%;
        }
        
        .withdraw-amount-field:focus {
            outline: none;
        }
        
        .withdraw-balance-tip {
            font-size: 13px;
            color: #999;
            text-align: right;
            margin-top: 8px;
        }
        
        .quick-amount {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 16px;
        }
        
        .amount-button {
            flex: 1;
            min-width: 80px;
            background-color: #f0f0f0;
            border: none;
            padding: 10px;
            border-radius: 6px;
            text-align: center;
            font-size: 14px;
            color: #333;
        }
        
        .amount-button.active {
            background-color: #E8F5E9;
            color: #34C759;
            border: 1px solid #34C759;
        }
        
        .withdraw-button {
            background-color: #2B7DE1;
            color: white;
            border: none;
            padding: 14px 20px;
            border-radius: 6px;
            font-size: 16px;
            width: 100%;
            margin-top: 20px;
        }
        
        .withdraw-button:disabled {
            background-color: #d0d0d0;
            color: #999;
        }
        
        .message-box {
            background-color: #f8f8f8;
            border-left: 4px solid #2B7DE1;
            padding: 12px 16px;
            margin-bottom: 16px;
            font-size: 14px;
            color: #666;
        }
    </style>
</head>
<body>
    <div class="app-container">
        <!-- 顶部状态栏 -->
        <div class="status-bar">
            <span class="time">10:25</span>
            <div class="status-icons">
                <span class="icon">📶</span>
                <span class="icon">📡</span>
                <span class="icon">🔋</span>
            </div>
        </div>
        
        <!-- 页面头部 -->
        <header class="page-header">
            <a href="profile.html" class="back-button">←</a>
            <div class="page-title">个人钱包</div>
        </header>
        
        <div class="page-content">
            <!-- 钱包余额 -->
            <div class="wallet-header">
                <div class="wallet-title">钱包余额（元）</div>
                <div class="wallet-balance">3,650.00</div>
                <div class="balance-details">
                    <div class="balance-item">
                        <div class="balance-value">3,650.00</div>
                        <div class="balance-label">总收入</div>
                    </div>
                    <div class="balance-item">
                        <div class="balance-value">560.00</div>
                        <div class="balance-label">可提现</div>
                    </div>
                    <div class="balance-item">
                        <div class="balance-value">120.00</div>
                        <div class="balance-label">冻结金额</div>
                    </div>
                </div>
            </div>
            
            <!-- 快捷功能按钮 -->
            <div class="action-buttons">
                <div class="action-button" onclick="openWithdrawModal()">
                    <div class="action-icon">💳</div>
                    <div class="action-text">提现</div>
                </div>
                <div class="action-button" onclick="window.location.href='income.html'">
                    <div class="action-icon">📊</div>
                    <div class="action-text">收入明细</div>
                </div>
                <div class="action-button" onclick="window.location.href='bank-cards.html'">
                    <div class="action-icon">🏦</div>
                    <div class="action-text">银行卡</div>
                </div>
            </div>
            
            <!-- 我的银行卡 -->
            <div class="section-title">我的银行卡</div>
            <div class="card-container">
                <div class="bank-card">
                    <div class="card-logo">💳</div>
                    <div class="card-chip"></div>
                    <div class="card-number">**** **** **** 8888</div>
                    <div class="card-info">
                        <div class="card-name">张三</div>
                        <div class="card-expire">12/25</div>
                    </div>
                    <div style="position: absolute; bottom: 16px; left: 16px; font-size: 12px; opacity: 0.8;">
                        招商银行
                    </div>
                </div>
            </div>
            
            <!-- 最近交易 -->
            <div class="transaction-card">
                <div class="card-header">
                    <div class="header-title">最近交易</div>
                    <a href="income.html" class="header-action">查看全部 ></a>
                </div>
                <div class="transaction-list">
                    <div class="transaction-item">
                        <div class="transaction-icon income-icon">💰</div>
                        <div class="transaction-info">
                            <div class="transaction-title">护理服务收入</div>
                            <div class="transaction-time">2023-10-25 14:30</div>
                        </div>
                        <div class="transaction-amount income-amount">+¥280.00</div>
                    </div>
                    <div class="transaction-item">
                        <div class="transaction-icon withdraw-icon">💸</div>
                        <div class="transaction-info">
                            <div class="transaction-title">提现到招商银行(8888)</div>
                            <div class="transaction-time">2023-10-20 10:15</div>
                        </div>
                        <div class="transaction-amount withdraw-amount">-¥1,000.00</div>
                    </div>
                    <div class="transaction-item">
                        <div class="transaction-icon income-icon">💰</div>
                        <div class="transaction-info">
                            <div class="transaction-title">护理服务收入</div>
                            <div class="transaction-time">2023-10-18 09:45</div>
                        </div>
                        <div class="transaction-amount income-amount">+¥350.00</div>
                    </div>
                    <div class="transaction-item">
                        <div class="transaction-icon income-icon">💰</div>
                        <div class="transaction-info">
                            <div class="transaction-title">护理服务收入</div>
                            <div class="transaction-time">2023-10-15 16:20</div>
                        </div>
                        <div class="transaction-amount income-amount">+¥280.00</div>
                    </div>
                </div>
            </div>
            
            <!-- 提现规则说明 -->
            <div style="margin: 0 16px 20px; padding: 16px; background-color: #f9f9f9; border-radius: 8px;">
                <div style="font-size: 15px; font-weight: 500; margin-bottom: 12px; color: #333;">提现说明</div>
                <ul style="font-size: 13px; color: #666; padding-left: 16px; line-height: 1.6;">
                    <li>提现金额最低100元起，最高50,000元/笔</li>
                    <li>提现申请将在1-3个工作日内处理到账</li>
                    <li>每月前3笔提现免手续费，之后每笔收取1%手续费</li>
                    <li>冻结金额为待结算和有争议订单的金额，暂不可提现</li>
                </ul>
            </div>
        </div>
        
        <!-- 底部导航栏 -->
        <nav class="bottom-nav">
            <a href="index.html" class="nav-item">
                <span class="nav-icon">🏠</span>
                <span>首页</span>
            </a>
            <a href="signin-center.html" class="nav-item">
                <span class="nav-icon">✓</span>
                <span>签到中心</span>
            </a>
            <a href="orders.html" class="nav-item">
                <span class="nav-icon">📋</span>
                <span>订单中心</span>
            </a>
            <a href="profile.html" class="nav-item active">
                <span class="nav-icon">👤</span>
                <span>我的</span>
            </a>
        </nav>
        
        <!-- 提现模态框 -->
        <div class="modal" id="withdrawModal">
            <div class="modal-content">
                <div class="modal-title">申请提现</div>
                <div class="close-button" onclick="closeModal()">✕</div>
                
                <div class="message-box">
                    当前可提现金额：¥560.00，冻结金额：¥120.00
                </div>
                
                <div class="withdraw-amount-container">
                    <div class="withdraw-amount-label">提现金额</div>
                    <div class="withdraw-amount-input">
                        <span class="currency-symbol">¥</span>
                        <input type="number" class="withdraw-amount-field" id="withdrawAmount" placeholder="0.00" min="100" max="560" step="0.01" oninput="checkWithdrawAmount()">
                    </div>
                    <div class="withdraw-balance-tip">可提现余额：¥560.00</div>
                </div>
                
                <div class="form-group">
                    <div class="form-label">快捷金额</div>
                    <div class="quick-amount">
                        <button class="amount-button" onclick="setAmount(100)">¥100</button>
                        <button class="amount-button" onclick="setAmount(200)">¥200</button>
                        <button class="amount-button" onclick="setAmount(300)">¥300</button>
                        <button class="amount-button" onclick="setAmount(560)">全部提现</button>
                    </div>
                </div>
                
                <div class="form-group">
                    <label class="form-label">提现银行卡</label>
                    <select class="form-input">
                        <option value="1">招商银行储蓄卡 (尾号8888)</option>
                        <option value="2">添加新银行卡</option>
                    </select>
                </div>
                
                <div class="form-group">
                    <label class="form-label">验证码</label>
                    <div style="display: flex; gap: 10px;">
                        <input type="text" class="form-input" placeholder="请输入短信验证码" style="flex: 1;">
                        <button style="padding: 0 15px; background: #f0f0f0; border: none; border-radius: 6px; color: #333; white-space: nowrap;" onclick="sendVerificationCode()">获取验证码</button>
                    </div>
                </div>
                
                <div class="message-box">
                    提现将在1-3个工作日内到账，实际到账时间以银行处理为准。
                </div>
                
                <button class="withdraw-button" id="withdrawButton" disabled onclick="submitWithdrawal()">
                    确认提现
                </button>
            </div>
        </div>
    </div>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 更新顶部时间
            function updateTime() {
                const now = new Date();
                const hours = now.getHours().toString().padStart(2, '0');
                const minutes = now.getMinutes().toString().padStart(2, '0');
                document.querySelector('.time').textContent = `${hours}:${minutes}`;
            }
            
            updateTime();
            setInterval(updateTime, 60000);
        });
        
        // 打开提现模态框
        function openWithdrawModal() {
            document.getElementById('withdrawModal').style.display = 'block';
            document.body.style.overflow = 'hidden'; // 防止背景滚动
        }
        
        // 关闭模态框
        function closeModal() {
            document.getElementById('withdrawModal').style.display = 'none';
            document.body.style.overflow = 'auto'; // 恢复背景滚动
        }
        
        // 检查提现金额是否有效
        function checkWithdrawAmount() {
            const amountInput = document.getElementById('withdrawAmount');
            const withdrawButton = document.getElementById('withdrawButton');
            const amount = parseFloat(amountInput.value);
            
            // 移除所有按钮的active状态
            document.querySelectorAll('.amount-button').forEach(button => {
                button.classList.remove('active');
            });
            
            // 验证金额是否有效
            if (amount && amount >= 100 && amount <= 560) {
                withdrawButton.disabled = false;
                
                // 匹配快捷金额按钮
                if (amount === 100 || amount === 200 || amount === 300 || amount === 560) {
                    document.querySelectorAll('.amount-button').forEach(button => {
                        if (button.textContent === `¥${amount}` || (amount === 560 && button.textContent === '全部提现')) {
                            button.classList.add('active');
                        }
                    });
                }
            } else {
                withdrawButton.disabled = true;
            }
        }
        
        // 设置快捷金额
        function setAmount(amount) {
            document.getElementById('withdrawAmount').value = amount;
            checkWithdrawAmount();
        }
        
        // 发送验证码
        function sendVerificationCode() {
            showToast('验证码已发送到您的手机');
        }
        
        // 提交提现申请
        function submitWithdrawal() {
            const amount = document.getElementById('withdrawAmount').value;
            
            // 简单验证
            if (!amount || parseFloat(amount) < 100) {
                showToast('提现金额最低100元');
                return;
            }
            
            // 模拟提交
            showToast('正在提交提现申请...');
            setTimeout(() => {
                closeModal();
                showToast('提现申请已提交，请等待处理');
            }, 1500);
        }
        
        // 轻提示
        function showToast(message) {
            // 检查是否已有toast
            let toast = document.querySelector('.toast');
            if (toast) {
                toast.remove();
            }
            
            // 创建新的toast
            toast = document.createElement('div');
            toast.className = 'toast';
            toast.textContent = message;
            document.body.appendChild(toast);
            
            // 样式
            toast.style.position = 'fixed';
            toast.style.left = '50%';
            toast.style.bottom = '10%';
            toast.style.transform = 'translateX(-50%)';
            toast.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
            toast.style.color = 'white';
            toast.style.padding = '10px 20px';
            toast.style.borderRadius = '20px';
            toast.style.fontSize = '14px';
            toast.style.zIndex = '9999';
            toast.style.opacity = '0';
            toast.style.transition = 'opacity 0.3s';
            
            // 显示和自动隐藏
            setTimeout(() => {
                toast.style.opacity = '1';
            }, 10);
            
            setTimeout(() => {
                toast.style.opacity = '0';
                setTimeout(() => {
                    toast.remove();
                }, 300);
            }, 2000);
        }
    </script>
</body>
</html> 